<template>
	<view>
		<cu-custom bgColor="bg-custom-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">工单详情</block>
		</cu-custom>

		<!-- 用户信息 -->
		<view class="user">
			<view class="right ">
				<view class="username">编号</view>
				<view class="username">客户名称</view>
				<view class="username">联系电话</view>
				<view class="username">地址(门号)</view>
				<view class="username">报修时间</view>
				<view class="username">问题描述</view>
			</view>
			<view class="right">
				<view class="signature">{{orderitem.orderno}}</view>
				<view class="signature">{{orderitem.name}}</view>
				<view class="signature">{{orderitem.phone}}</view>
				<view class="signature">{{orderitem.addr}}</view>
				<view class="signature">{{orderitem.cdate}}</view>
				<view class="signature"> 
				  {{orderitem.content}}  
				</view>
			</view>
		</view>
		<view class="place-1"></view>
		<!-- 維修編輯 -->
		<scroll-view scroll-x class="bg-white nav text-center  toolbar" style="margin-top:-150upx;">
			<view class="cu-item " :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in devtypelist" :key="index"
			 @tap="tabSelect" :data-id="index">
				<block>
					<text :class="devtypelist[index].icon" type="default"></text>
					<text style="padding-left: 10upx;" type="default">{{devtypelist[index].title}}</text>
				</block>
			</view>
		</scroll-view>

		<scroll-view scroll-y="true" class="bg-white nav text-center ">
			<view class="toolbar">
				<!-- 维修人员信息 -->
				<view class="wx_list " v-if="TabCur==1" style="height: 100%;">
					<view class="left">
						<view class="round lg">
							<image style=" width: 20vw;height: 20vw;border-radius: 100%; " src="../../static/img/user1.jpg"></image>
						</view>
					</view>
					<view class="cent ">
						<view class="signature">维修员:{{userInfo.userName}}</view>
						<view class="signature">工号:{{userInfo.no}}</view>
						<view class="signature">职称:{{userInfo.zhiwu}}</view>
						<view class="signature">电话:{{userInfo.phone}}</view>
					</view>
					<view class="place-1"></view>
				</view>
				<!-- 维修工单信息 -->
				<view class="wxd_list " v-if="TabCur==0">
					<view class="module1 text-lg">
						<view class="cu-bar bg-white solid-bottom">
							<view class="solid-bottom padding ">
								<text class=" cuIcon-edit text-grey text-bold custom-font">&emsp;&emsp;
									填写-维修内容</text>
							</view>
						</view>
						<view class="margin-top">
							<form>
								<view class=" cu-form-group cu-bar bg-white">
									<view class="title">维修前图片上传 </view>
									<view class="action">
										{{imgList_before.length}}/{{gloablePicCount}}
									</view>
								</view>
								<view class="cu-form-group padding-sm">
									<view class="grid col-4 grid-square flex-sub">
										<view class="bg-img" v-for="(item,index) in imgList_before" :key="index" @tap="ViewImage_before" :data-url="imgList_before[index]">
											<image class="bg-img" :src="imgList_before[index]" mode="aspectFill"></image>
											<view class="cu-tag bg-red" @tap.stop="DelImg_before" :data-index="index">
												<text class='cuIcon-close'></text>
											</view>
										</view>
										<view class="solids" @tap="ChooseImage(0)" v-if="imgList_before.length< gloablePicCount ">
											<text class='cuIcon-cameraadd'></text>
										</view>
									</view>
								</view>

								<view class=" cu-form-group cu-bar bg-white">
									<view class="title">维修后图片上传 </view>
									<view class="action">
										{{imgList_after.length}}/{{gloablePicCount}}
									</view>
								</view>
								<view class="cu-form-group padding-sm">
									<view class="grid col-4 grid-square flex-sub">
										<view class="bg-img" v-for="(item,index) in imgList_after" :key="index" @tap="ViewImage_after" :data-url="imgList_after[index]">
											<image :src="imgList_after[index]" mode="aspectFit"></image>
											<view class="cu-tag bg-red" @tap.stop="DelImg_after" :data-index="index">
												<text class='cuIcon-close'></text>
											</view>
										</view>
										<view class="solids" @tap="ChooseImage(1)" v-if="imgList_after.length<  gloablePicCount ">
											<text class='cuIcon-cameraadd'></text>
										</view>
									</view>
								</view>
								<view class="cu-form-group  align-start">
									<view class="title">维修内容描述</view>
									<textarea placeholder="请输入维修内容描述" :value="recordorderitem.wx_content" v-text="recordorderitem.wx_content"
									 bindinput="gzmsValueinput" maxlength="-1" :disabled="modalName!=null" @input="textareaBInput"></textarea>
								</view>

								<view class="bg-white align-center">
									<view class="flex flex-wrap">
										<!-- <view class="basis-df padding">
											<button class=" bg-blue xs text-lg" @tap="tj()">修改</button>
										</view>
										<view class="basis-df  padding">
											<button class="bg-blue xs text-lg">清空</button>
										</view> -->
									</view>
								</view>
							</form>

						</view>
					</view>
					<view class="place-1"></view>
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import uu from "@/common/util.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				pid: 0,
				gloablePicCount:3,
				devtypelist: [{
						title: '维修工单',
						icon: 'cuIcon-edit'
					},
					{
						title: '维修人员信息',
						icon: 'cuIcon-people'
					},
				],
				imgList_before: [],
				imgList_after: [],
				imgList_before_base64: [],
				imgList_after_base64: [],

				materialList: [], //压缩图片数组
				modalName: null,
				textareaBValue: '',
				username:'',
				orderid: '', //数据标识
				orderitem: [], // 单子详情
				recordorderitem: {
					// local_before_img:'',
					// local_after_img: '',
					// wx_before_img: '',
					// wx_after_img: '',
					// wx_content: '',
				}, //填写表单详情
				optype: '', //跳转标识
				isedit: false, //操作标识 true edit false 查看
				isFload: true,
			}
		},
		//接收参数
		onLoad(event) {
			this.isedit = event.edit;
			this.orderid = event.id;
			this.optype = event.type;
			console.log('传回的id' + this.orderid);
			this.getorderdetail();

			this.getInfo();
		},onReady() { 
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					console.log(res.data.name+"aaaaaaaaaaa");
					this.username = res.data.name;
					
				},
				fail: (e) => {
					//this.toLogin(); 
				}
			}); 
		},
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			// 返回首页
			onreturn() {
				uni.reLaunch({
					url: '../index/index'
				});
			},
			//返回上一页
			backButton() {
				uni.navigateBack({
					delta: 1
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			//选择照片
			ChooseImage(tag) {

				uni.chooseImage({
					count: this.gloablePicCount, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择、摄像头
					success: (res) => {
						
						//将拍摄的照片保存至本地
						if (res.tempFilePaths[0].indexOf("Camera") > 0) {
							//从相册选取= 不保存
						} else {
							//手动拍摄  需要保存
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePaths[0],
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								}
							});
						}
						
						switch (tag) {
							case 0: //前
								if (this.imgList_before.length != 0) {
									this.imgList_before = this.imgList_before.concat(res.tempFilePaths)
								} else {
									this.imgList_before = res.tempFilePaths
								}
								break;
							case 1: //后
								if (this.imgList_after.length != 0) {
									this.imgList_after = this.imgList_after.concat(res.tempFilePaths)
								} else {
									this.imgList_after = res.tempFilePaths
								}

								break;
							default:
								break;
						}
						//this.app_img(0, res);
					}

				});
			},
			ViewImage_before(e) {
				uni.previewImage({
					urls: this.imgList_before,
					current: e.currentTarget.dataset.url
				});

			},
			ViewImage_after(e) {
				uni.previewImage({
					urls: this.imgList_after,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg_before(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList_before.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			DelImg_after(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList_after.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value;
					console.log("这是一个文本值"+this.textareaBValue);
			},
			//用户工单详情
			getorderdetail() {
				var _self = this;
				plus.sqlite.selectSql({
					name: 'test',
					sql: "select * from c_wordorder where id='" + _self.orderid + "'",
					success: function(data) {
						_self.orderitem = data[0];
						if(_self.orderitem.content.length>20){
							_self.orderitem.content = _self.orderitem.content.substr(0,20)+"...";
						}
						console.log(_self.orderitem);
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				});
			},
			//app图片压缩上传
			app_img(num, rem) {
				let that = this
				let index = rem.tempFiles[num].path.lastIndexOf("."); //获取图片地址最后一个点的位置  
				let img_type = rem.tempFiles[num].path.substring(index + 1, rem.tempFiles[num].path.length); //截取图片类型如png jpg
				let img_yuanshi = rem.tempFiles[num].path.substring(0, index); //截取图片原始路径
				let d2 = new Date().getTime(); //时间戳
				//压缩图片
				plus.zip.compressImage({
						src: rem.tempFiles[num].path, //你要压缩的图片地址
						dst: img_yuanshi + d2 + '.' + img_type, //压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样，不然真机上报code-5)
						quality: 10 //[10-100]
					},
					function(e) {
						console.log("Compress success!", e.target);
						//压缩之后路径转base64位的
						//通过URL参数获取目录对象或文件对象
						plus.io.resolveLocalFileSystemURL(e.target, function(entry) {
							// 可通过entry对象操作test.html文件 
							entry.file(function(file) { //获取文件数据对象
								var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容
								//alert("getFile:" + JSON.stringify(file));
								fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
								fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
									console.log(evt.target.result.split(",")[1]) //拿到‘data:image/jpeg;base64,‘后面的

									rem.tempFiles[num].Base64_Path = evt.target.result.split(",")[1]
								}
							})
						})
						that.materialList = that.materialList.concat(rem.tempFiles[num]);
						//利用递归循环来实现多张图片压缩
						if (num == rem.tempFiles.length - 1) {
							return
						} else {
							that.app_img(num + 1, rem)
						}
						console.log('end', that.materialList)
					},
					function(error) {
						console.log("Compress error!");
						console.log(JSON.stringify(error));
					}
				);
			},
			// 兼容处理：ios获取的图片上下颠倒
			reverseImgData(res) {
				var w = res.width
				var h = res.height
				let con = 0
				for (var i = 0; i < h / 2; i++) {
					for (var j = 0; j < w * 4; j++) {
						con = res.data[i * w * 4 + j]
						res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
						res.data[(h - i - 1) * w * 4 + j] = con
					}
				}
				return res
			},
			//图片转base64
			urlTobase64(url, mth) {
				var _self = this;
				var urls = url.toString().split(',');
				for (var i = 0; i < urls.length; i++) {
					var urlitem = urls[i];
			        console.log("路径----"+urlitem);
					plus.io.resolveLocalFileSystemURL(urlitem, function(entry) {
						// 可通过entry对象操作test.html文件 
						entry.file(function(file) { //获取文件数据对象
							var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容
							//alert("getFile:" + JSON.stringify(file));
							fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
							fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
			
								if (mth == 'before') {
									if (_self.imgList_before_base64.length != 0) {
										_self.imgList_before_base64 = _self.imgList_before_base64.concat(evt.target.result);
									} else {
										_self.imgList_before_base64 = evt.target.result;
									}
								} else {
									if (_self.imgList_after_base64.length != 0) {
										_self.imgList_after_base64 = _self.imgList_after_base64.concat(evt.target.result);
									} else {
										_self.imgList_after_base64 = evt.target.result;
									}
								}
							}
						})
					})
				}
			},
			// 提交表单内容
			tj() {

				var _self = this;
				console.log(_self.imgList_before);
				console.log(_self.imgList_after);
				//图片压缩并转base4
				for (var i = 0; i < _self.imgList_before.length; i++) {
					_self.urlTobase64(_self.imgList_before[i], 'before')
				}

				for (var i = 0; i < _self.imgList_after.length; i++) {
					_self.urlTobase64(_self.imgList_after[i], 'after')
				}


				uni.showModal({
					title: '提示',
					content: '确认要修改吗？',
					success: function(res) {
						if (res.confirm) {
							setTimeout(function() {
								let sqls = "update c_wordorder_record set local_before_img='" +
									_self.imgList_before.toString() +
									"',local_after_img='" + _self.imgList_after.toString() +
									"',wx_before_img ='" +
									_self.imgList_before_base64.toString() + "' , wx_after_img='" +
									_self.imgList_after_base64.toString() + "',wx_content='" +
									_self.textareaBValue + "',wx_cdate='" +
									 uu.getTime() + "' where id='" +
									_self.orderitem.id + "'";

								console.log(_self.imgList_before.toString());
								console.log(_self.imgList_after.toString());
								console.log('sqls=' + sqls);
								plus.sqlite.executeSql({
									name: 'test',
									sql: sqls,
									success: function(e) {
										uni.showToast({
											title: '修改成功！',
											icon: "success"
										});
										console.log('维修单录入 success!');

										//返回页面
										_self.backButton();

									},
									fail: function(e) {
										uni.showToast({
											title: '修改失败！',
											icon: "none"
										});
										console.log('executeSql failed: ' + JSON.stringify(e));
									}
								});

							}, 1000);

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true; //return true的意思是禁止返回到上一个界面

			},
			//查看表单填写情况
			getInfo() {
				var _self = this;
				plus.sqlite.selectSql({
					name: 'test',
					sql: "select * from c_wordorder_record where id='" + _self.orderid + "'",
					success: function(data) {
						_self.recordorderitem = data[0];

						var ss_before = _self.recordorderitem.local_before_img.split(',');
						if (_self.recordorderitem.local_before_img.length > 0) {
							for (var i = 0; i < ss_before.length; i++) {
								//转换为绝对路劲
								var lpath = "file://" + plus.io.convertLocalFileSystemURL(ss_before[i]);
								_self.imgList_before.push(lpath);
								console.log(lpath);
							}

						}

						var sss = _self.recordorderitem.local_after_img.split(',');
						 console.log(_self.recordorderitem.local_after_img.length);
						if (_self.recordorderitem.local_after_img.length> 0) { 
							
							for (var i = 0; i < sss.length; i++) {
								var lpath = "file://" + plus.io.convertLocalFileSystemURL(sss[i]);
								_self.imgList_after.push(lpath);
								console.log(lpath);
							}
						}
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
	}

	page {
		position: relative;
		background-color: #fff;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.place {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-1 {
		height: 20upx;
	}

	.place-bottom {
		height: 300upx;
	}

	.bg-menu {
		background-color: #0081ff;
		color: #FFFFFF;
	}

	.bg-custom-blue {
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		color: #ffffff;
	}

	.user {
		width: 100%;
		height: 600upx;
		display: flex;
		align-items: center;
		// position: relative;
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		border-radius: 0 0 10% 10%;
		padding-bottom: 120upx;
		padding-top: 10upx;

		.right {
			width: 100%;

			.username {
				margin-left: 50upx;
				color: #fff;
				height: 60upx;
				font-size: 28upx;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
				height: 60upx;
			}
		}


	}


	.toolbar {
		width: 92%;
		margin: 0 8% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 0upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.wx_list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.left {
				margin-top: 30upx;
				width: 20vw;
				height: 20vw;
				flex-shrink: 0;
				margin-right: 20upx;
				border: solid 1upx #fff;
			}

			.cent {
				margin-top: 30upx;
				text-align: left;

				.signature {
					margin-left: 100upx;
					color: #000;
					height: 60upx;
				}
			}

			.right {
				width: 20vw;
				height: 20vw;
				flex-shrink: 0;
				margin-right: 20upx;
				border: solid 1upx #fff;
			}

		}

		.wxd_list {}
	}
	
	 
</style>
